<template>
    <div>
        <h1>{{pageIndex}}</h1>
        <div class="my-comment">
            <form>
                <div class="title">发表评论</div>
                <textarea placeholder="请输入不超过120个字的短评" v-model="commentmsg"></textarea>
                <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
            </form>
            <ul class="com-content">
                <li v-for="(item,i) in commentList" :key="item.i">
                    <div class="com-content-title">
                        <span>第 {{ i+1 }} 楼</span>
                        <span>用户：{{ item.id }}</span>
                        <span>发表时间：{{ item.add_time | dataFormat }}</span>
                    </div>
                    <div class="com-content-con">
                        {{ item.title }}
                    </div>
                </li>
            </ul> 
                 
        </div>
        <mt-button type="danger" plain size="large" @click.prevent="addMore">加载更多</mt-button>
    </div>
</template>
<script>
import { Toast } from "mint-ui"

export default {
    data(){
        return {
            commentList:[],
            pageIndex : 1,
            commentmsg:""
        }
    },
    props:["id"],
    created(){
        //  console.log(this.commentid)
        // console.log("api/getcomments/"+this.commentid+"?pageIndex="+this.pageIndex)
        console.log("api/postcomment/"+this.id)
        this.getCommentList();
        // console.log(this.commentid)
    },
    methods:{
        getCommentList(){
            // console.log(this.id)
            this.$http.get("api/getnewslist").then( result =>{
                if( result.body.status === 0 ){
                    // Toast("加载成功")
                    this.commentList = result.body.message
                }else {
                    Toast("加载失败")
                }
            })
        },
        addMore(){
           this.pageIndex++;
           this.getCommentList()
           console.log(this.commentList)
        },
        postComment(){
            if(this.commentmsg.trim() == "") return Toast("输入内容不能为空")
            this.$http.post("api/postcomment/"+this.id,{
                content:this.commentmsg.trim()
            }).then( result => {
                if(result.body.status === 0 ){
                    // Toast("加载成功")
                    // 把新增加的数据手动添加到commentList中
                    var sm = {
                        add_time: new Date(),
                        title: this.commentmsg.trim(),
                        id:"匿名者"
                    }
                    this.commentList.unshift(sm)
                    this.commentmsg = ""

                }else {
                    Toast("加载失败")
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    ul,li {
        list-style: none;
        padding: 0px;
        margin: 0px;
    }
    .my-comment {
        font-family:"microsoft yahei";
        .title {
            font-size: 16px;
            font-weight: 700;
            border-bottom: 1px solid #ccc;
            padding: 5px 0px;
        } 
        textarea {
            margin: 5px 0px;
            height:100px;
            font-size: 14px;
        } 
      .com-content {
          margin-top: 5px;
          .com-content-title {
              padding-left: 5px;
              font-size: 13px;
              background: #f0f0f0;
              line-height: 30px;
              span {
                  margin-right: 5px;
              }
          }
          .com-content-con {
              font-size: 14px;
              line-height: 25px;
              text-indent: 2em;
              padding: 5px 0px;
          }
      }
    }
</style>


